<template>
  <div class="app-container">
    <div class="header">
      <el-page-header @back="goBack" content="成品入库单列表"></el-page-header>
      <el-button type="primary" @click="handleAdd">新增入库单</el-button>
    </div>
    <!-- 添加筛选输入框 -->
    <div class="filter-container">
      <!-- 添加自定义类名 wide-input -->
      <el-input v-model="filterGoods" placeholder="按物资筛选" @input="filterData" class="wide-input"></el-input>
      <el-input v-model="filterInventoryNo" placeholder="按入库单号筛选" @input="filterData" class="wide-input"></el-input>
      <el-input v-model="filterPickupUnit" placeholder="按提货单位筛选" @input="filterData" class="wide-input"></el-input>
      <!-- 添加入库日期筛选日期选择器 -->
      <el-date-picker v-model="filterInventoryDate" type="date" placeholder="按入库日期筛选" @change="filterData"
        class="wide-input"></el-date-picker>
      <!-- 添加连续号筛选输入框 -->
      <el-input v-model="filterSerialNumber" placeholder="按连续号筛选" @input="filterData" class="wide-input"></el-input>
    </div>
    <el-table :data="filteredTableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="goods" label="物资"></el-table-column>
      <el-table-column prop="inventoryNo" label="入库单号"></el-table-column>
      <el-table-column prop="inventoryDate" label="入库日期">
        <template slot-scope="scope">
          {{ formatDate(scope.row.inventoryDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="serialNumber" label="连续号"></el-table-column>
      <el-table-column prop="pickupUnit" label="提货单位"></el-table-column>
      <el-table-column prop="createTime" label="创建时间">
        <template slot-scope="scope">
          {{ formatDateTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleView(scope.row)">查看</el-button>
          <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
      :total="total" layout="total, prev, pager, next" style="margin-top: 20px;">
    </el-pagination>
  </div>
</template>

<script>
import { getProductInventoryList, deleteProductInventory } from '@/api/productInventory'
import { formatDate, formatDateTime } from '@/utils/date'

export default {
  name: 'RukudanList',
  data() {
    return {
      tableData: [],
      filteredTableData: [], // 新增筛选后的表格数据
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      filterGoods: '', // 新增物资筛选关键字
      filterInventoryNo: '', // 新增入库单号筛选关键字
      filterPickupUnit: '', // 新增提货单位筛选关键字
      // 添加入库日期筛选关键字
      filterInventoryDate: '',
      // 添加连续号筛选关键字
      filterSerialNumber: ''
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    formatDate,
    formatDateTime,
    async fetchData() {
      this.loading = true
      try {
        const response = await getProductInventoryList({
          current: this.currentPage,
          size: this.pageSize
        })
        this.tableData = response.data.records
        this.total = response.data.total
        this.filterData() // 数据获取后进行筛选
      } catch (error) {
        this.$message.error('获取列表失败')
      } finally {
        this.loading = false
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    handleAdd() {
      this.$router.push('/main/xingzheng/rukudan/rukudan')
    },
    handleView(row) {
      this.$router.push(`/main/xingzheng/rukudan/rukudan?id=${row.id}&type=view`)
    },
    handleEdit(row) {
      this.$router.push(`/main/xingzheng/rukudan/rukudan?id=${row.id}&type=edit`)
    },
    async handleDelete(row) {
      try {
        await this.$confirm('确认删除该记录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        const success = await deleteProductInventory(row.id)
        if (success) {
          this.$message.success('删除成功')
          this.fetchData()
        } else {
          this.$message.error('删除失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除失败')
        }
      }
    },
    goBack() {
      this.$router.push('/main/xingzheng/rukudan/rukudan')
    },
    // 新增筛选方法
    filterData() {
      this.filteredTableData = this.tableData.filter(item => {
        const inventoryDate = formatDate(item.inventoryDate);
        return (
          item.goods.includes(this.filterGoods) &&
          item.inventoryNo.includes(this.filterInventoryNo) &&
          item.pickupUnit.includes(this.filterPickupUnit) &&
          // 修改入库日期筛选条件
          (!this.filterInventoryDate || inventoryDate === formatDate(this.filterInventoryDate)) &&
          item.serialNumber.toString().includes(this.filterSerialNumber)
        );
      });
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* 添加筛选容器样式 */
.filter-container {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  justify-content: space-between;
}

/* 设置自定义类名的宽度 */
.wide-input {
  width: 200px;
  /* 可以根据需要调整宽度 */
}
</style>